<template>
    <div class="register-box">
        <div class="fields">
            <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
            <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
            <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="password2"></mt-field>
            <!--<mt-field label="手机" placeholder="请次输入手机号码" type="password" v-model="mobile"></mt-field>-->
        </div>
        <mt-radio style="margin-top: 2rem;"
                v-model="userType"
                title="选择用户类型"
                :options="['普通用户', '房主']">
        </mt-radio>
        <div class="btn">
            <mt-button type="primary" class="normal" :disabled="logining" @click="register">
                <div class="btn-box">
                    <span v-if="!logining">注册</span>
                    <mt-spinner type="triple-bounce" color="white" v-if="logining"></mt-spinner>
                </div>
            </mt-button>
        </div>
        <div class="act">
            <div class="link">
                已有账号？<router-link :to="{name: 'login'}">马上登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import methods from './methods'
    import created from './created'

    export default {
        name: "index",
        data () {
            return {
                username: '',
                password: '',
                password2: '',
                mobile: '',
                userType: '普通用户',
                logining: false,
                errors: null,
            }
        },
        methods,
        created
    }
</script>

<style scoped lang="less">
    @import "style";
</style>